{extend name="default/layout" /}

{block name="content"}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">

    <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">

        <!-- 侧边栏导航 -->
        {assign name="current" value="index" /}
        {include file="default/components/user-sidebar" /}

        <!-- 主要内容区域 -->
        <div class="lg:col-span-3">
            <div class="bg-white rounded-t-lg p-4 border-b border-gray-200">
                <div class="flex items-center justify-between">
                    <h1 class="text-xl font-bold text-gray-800">我的账户</h1>
                </div>
            </div>
            <!-- 账户信息 -->
            <div class="bg-white rounded-b-lg overflow-hidden">
                <div class="">
                    <!-- 我的账号 -->
                    <div class="flex items-center justify-between p-4 md:p-6">
                        <div class="flex items-center gap-3 min-w-0 flex-1">
                            <div class="text-sm text-gray-500 whitespace-nowrap">我的账号</div>
                            <div class="text-gray-800 font-medium truncate">{$user.username|default='未设置'}</div>
                        </div>
                    </div>

                    <!-- 我的头像 -->
                    <div class="flex items-center justify-between p-4 md:p-6">
                        <div class="flex items-center gap-3 min-w-0 flex-1">
                            <div class="text-sm text-gray-500 whitespace-nowrap">我的头像</div>
                            <div class="flex items-center gap-2">
                                <img src="{$user.avatar}" alt="用户头像"
                                    class="w-10 h-10 rounded-full object-cover user-avatar">
                            </div>
                        </div>
                        <button id="editAvatarBtn"
                            class="px-4 py-2 text-sm text-blue-500 hover:opacity-80 cursor-pointer transition-opacity duration-200 whitespace-nowrap">修改</button>
                    </div>

                    <!-- 我的昵称 -->
                    <div class="flex items-center justify-between p-4 md:p-6">
                        <div class="flex items-center gap-3 min-w-0 flex-1">
                            <div class="text-sm text-gray-500 whitespace-nowrap">我的昵称</div>
                            <div class="text-gray-800 font-medium truncate" id="currentNickname">
                                {$user.nickname|default=$user.username}</div>
                        </div>
                        <button id="editNicknameBtn"
                            class="px-4 py-2 text-sm text-blue-500 hover:opacity-80 cursor-pointer transition-opacity duration-200 whitespace-nowrap">修改</button>
                    </div>

                    <!-- 我的ID -->
                    <div class="flex items-center justify-between p-4 md:p-6">
                        <div class="flex items-center gap-3 min-w-0 flex-1">
                            <div class="text-sm text-gray-500 whitespace-nowrap">我的ID</div>
                            <div class="text-gray-800 font-medium">{$user.id}</div>
                        </div>
                    </div>

                    <!-- 我的邮箱 -->
                    <div class="flex items-center justify-between p-4 md:p-6">
                        <div class="flex items-center gap-3 min-w-0 flex-1">
                            <div class="text-sm text-gray-500 whitespace-nowrap">我的邮箱</div>
                            <div class="text-gray-800 font-medium truncate" id="currentEmail">
                                {$user.email|default='未绑定'}</div>
                        </div>
                        <button id="editEmailBtn"
                            class="px-4 py-2 text-sm text-blue-500 hover:opacity-80 cursor-pointer transition-opacity duration-200 whitespace-nowrap">
                            {if $user.email}修改{else}绑定{/if}
                        </button>
                    </div>

                    <!-- 密码设置 -->
                    <div class="flex items-center justify-between p-4 md:p-6">
                        <div class="flex items-center gap-3 min-w-0 flex-1">
                            <div class="text-sm text-gray-500 whitespace-nowrap">密码设置</div>
                            <div class="text-gray-800 font-medium">***</div>
                        </div>
                        <button id="editPasswordBtn"
                            class="px-4 py-2 text-sm text-blue-500 hover:opacity-80 cursor-pointer transition-opacity duration-200 whitespace-nowrap">修改</button>
                    </div>
                </div>

                <div class="p-4 md:p-6 flex justify-end">
                    <button id="logoutBtn"
                        class="gap-2 px-4 py-2 text-red-500 hover:text-red-700 hover:bg-red-50 cursor-pointer transition-all duration-200 whitespace-nowrap flex items-center rounded border border-red-300">
                        <i class="fas fa-sign-out-alt mr-2"></i>
                        <span>退出登录</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}

{block name="css"}
<!-- 引入模态框修复样式 -->
<link rel="stylesheet" href="/static/default/css/modal-fix.css?v={$static_version}">
{/block}

{block name="js"}
<!-- 引入Modal组件 -->
<script src="/static/js/modal.js?v={$static_version}"></script>
<!-- 引入用户中心JS -->
<script src="/static/default/js/user-center.js?v={$static_version}"></script>
{/block}